<div *ngIf="filter">
    <div class="bg-primary text-white py-4">
        <div class="container">
            <h1 *ngIf="!editNameMode">{{ filter.name }}</h1>
            <input *ngIf="editNameMode" type="text" class="form-control mb-3" id="filterName" [(ngModel)]="filter.name" />
            Last edited: {{ filter.lastSaved | date }}
            <span *ngIf="owner" class="mx-3">Created by: {{ owner.firstName }} {{ owner.lastName }}</span>
            <button *ngIf="!editNameMode && filter && filter.isCurrentUserOwner == true && filter.type != filterType.Standard" class="btn btn-sm btn-transparent white" (click)="editNameMode = true; prevName = filter.name">Edit Name</button>
            <button *ngIf="editNameMode" class="btn btn-sm btn-transparent white" (click)="editNameMode = false; filter.name = prevName">Cancel</button>
            <button *ngIf="editNameMode" class="btn btn-sm btn-white text-primary-dark" (click)="saveFilter(true)">Save</button>
        </div>
    </div>

    <div class="container mt-5">
        <div class="row">
            <div class="col-md-3">
                <a href="javascript:;" [routerLink]="['../../']" class="text-link">
                    <i class="ti-arrow-left"></i>
                    Back to
                    <span *ngIf="filter.targetType == targetType.Screening">Screening</span>
                    <span *ngIf="filter.targetType == targetType.Report">Reporting</span>
                </a>

                <div class="card shadow mt-4">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <h5 class="mr-auto">Filter Sharing</h5>
                            <ui-switch size="small" (click)="shareFilter()" [checked]="filter.shared" class="ml-auto"></ui-switch>
                        </div>
                        <p class="mt-3">Switch Sharing setting to ON to share with colleagues.</p>
                    </div>
                </div>
                <button class="btn btn-block btn-transparent-danger mt-4" (click)="removeFilter()"><i class="ti-trash"></i> Delete Filter</button>
            </div>
            <div class="col-md-9">
                <!-- Filter settings -->
                <filter-settings *ngIf="filter" [filter]="filter" (portfolioChanged)="portfolioChanged($event)" (saveSetting)="saveFilter(true)"></filter-settings>

                <div class="d-flex align-items-center mt-5">
                    <h3 class="mr-auto">Selected Criteria - {{ criteriaListing.criteriaArray.length  }}</h3>
                    <div *ngIf="criteriaListing.criteriaArray.length > 0" class="ml-auto">
                        <button *ngIf="filter && filter.isCurrentUserOwner == true && filter.type != filterType.Standard" class="btn btn-transparent primary-dark" (click)="addCriteria()"><i class="ti-plus"></i> Add Criteria</button>
                        <button class="btn btn-transparent primary-dark ml-2" (click)="displayResults()">View Results</button>
                    </div>
                </div>

                <!-- Criteria list -->
                <criteria-listing #criteriaListing [filter]="filter" (criteriaChanged)="setCriteriaColumns($event)" (edit)="editCriteria($event)" (add)="addCriteria()"></criteria-listing>

                <!-- Export options and column reorder -->
                <filter-export [filter]="filter" [count]="elementCount" [(columns)]="criteriaListing.criteriaArray" (reorder)="resultOutput.setCriteriaColumns($event)" (portfolioSaved)="portfolioSaved()"></filter-export>

                <!-- Result table -->
                <results-output #resultOutput [filter]="filter" [screening]="filter.targetType == targetType.Screening" [securities]="securities" [hasCriteria]="criteriaListing.criteriaArray.length > 0" (finishedLoading)="finishedLoading($event)" (startLoading)="startLoading()"></results-output>
            </div>
        </div>
    </div>
</div>

<!-- Criteria Modal -->
<app-modal #criteriaModal [id]="'criteriaModal'" [size]="'modal-xl'" [showCloseButton]=false [showTopCloseButton]=true [criteria]=true (hidden)="resetCriteria()">
    <div class="app-modal-header">
        <span *ngIf="editCriteriaMode==true">Edit</span>
        <span *ngIf="editCriteriaMode==false">Add</span>
        Criteria
    </div>
    <div class="app-modal-body">
        <criteria #criteria [edit]=editCriteriaMode [filterId]="filterId" [type]="type" [level1]="editCriteriaLevel1Id" [level2]="editCriteriaLevel2Id"></criteria>
    </div>
    <div class="app-modal-footer">
        <button class="btn btn-transparent" (click)="cancelCriteriaModal()" data-dismiss="modal">Cancel</button>
        <button class="btn btn-primary-dark ml-2" (click)="saveCriteria()">Add Criteria</button>
    </div>
</app-modal>

